import { Button, Layout } from 'antd'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { useCallback } from 'react'
import './index.scss'

const { Header } = Layout

const LayoutHeader = (props) => {
  const { collapsed } = props

  /**
   * 处理菜单折叠（使用 useCallback 优化）
   */
  const handleToggle = useCallback(() => {
    if (
      props.onCollapsedChange &&
      typeof props.onCollapsedChange === 'function'
    ) {
      props.onCollapsedChange(!collapsed)
    }
  }, [collapsed, props.onCollapsedChange])

  return (
    <Header>
      <Button
        type={'text'}
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={handleToggle}
        className={'collapsed-btn'}
      />
    </Header>
  )
}
export default LayoutHeader
